<template>
	<view :style="'color:'+shallowColor" class="index-index">
		<view class="content-index">
			<headers @custom-event="customevent" @searchclick="e=>searchs=e" @searchclear="searchs=''"></headers>
			<el-container>
				<asides :asideW="asideW" :aside="aside"></asides>
				<!-- {{tabbar}} -->
				<!-- hidden-xs-only -->
				<view v-if="opShow" :class="isPc?'socialMedia social_pc':'socialMedia social_os'">
					<view class="socialTop">
						<view style="display: flex;">
							<view class="socialTitle">
								筛选信息
							</view>
							<view style="margin-left: 10px;display: flex;flex-wrap: wrap">
								<!-- {{getAllCheckedItems(socialList)}} -->
								<view v-for="(item,index) in socialList" :key="'one'+index" style="color:#333;">
									<view style="display: flex;justify-content: center;align-items: center;">
										<!-- {{item.name}} -->
										<view v-if="item.children" style="display: flex;flex-wrap: wrap;">
											<view v-for="(ite,inde) in item.children" :key="'three'+inde"
												style="display: flex;flex-wrap: wrap;">
												<view v-if="ite.checked==true"
													style="flex-wrap: wrap;display: flex;justify-content: center;align-items: center;">
													<uv-text :text="ite.name"></uv-text><uv-icon
														@click="sociaClick(index,inde)" size="12"
														style="cursor: pointer;" name="close-circle"></uv-icon>
													<view v-if="ite.children"
														style="margin-left: 10px;display: flex;flex-wrap: wrap;">
														<view v-for="(its,ind) in ite.children" :key="'fir'+ind"
															style="display: flex;flex-wrap: wrap;">
															<view v-if="its.checked==true"
																style="flex-wrap: wrap;margin-right: 10px;display: flex;justify-content: flex-start;align-items: center;">
																<uv-text :text="its.name"></uv-text><uv-icon
																	@click="sociaClick(index,inde,ind)" size="12"
																	style="cursor: pointer;"
																	name="close-circle"></uv-icon>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view style="display: flex;">
							<!-- <view class="">
								
							</view> -->
							<uv-input class="socialInput" clearable placeholder="请输入内容" border="surround"
								v-model="socialValue" @clear="clickSave"></uv-input>
							<el-button class="socialBtn" @click="clickSave">确认</el-button>
						</view>
					</view>

					<view :class="item.en" v-for="(item,index) in socialList" :key="item.name+'x'+index">
						<view class="socialItem">
							<view class="socialTitle">
								{{item.name}}
							</view>
							<view style="width: calc(100% - 56px);">
								<view
									style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
									<view v-if="item.children" v-for="(ite,ind) in item.children"
										:key="ite.name+'x'+ind" class="socialop">
										<view :class="ite.checked?'sociatt checked':'sociatt'"
											@click="multiple?multipled(index,ind):sociaClick(index,ind)">
											<view v-if="multiple">
												<i :class="ite.checked?'muicon sed':'muicon nod'"
													class="el-icon-check"></i>
											</view><uv-text size="13" :text="ite.name"></uv-text>
										</view>
									</view>
								</view>

								<view v-if="item.children&&item.checked" class="socialCont">
									<view style="width: 100%;" v-for="(ite,ind) in item.children"
										:key="ite.name+'.'+ind">
										<view v-if="ite.checked"
											style="margin-top: 10px;font-size: 15px;background-color: #fafafa;border: 1px solid #ccc;border-radius: 10px;display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
											<view v-for="(its,ins) in ite.children" :key="its.name+'.'+ins"
												:class="its.checked?'soctt checked':'soctt'" style=""
												@click="multiple?multipled(index,ind,ins):sociaClick(index,ind,ins)">
												<view v-if="multiple">
													<i :class="its.checked?'muicon sed':'muicon nod'"
														class="el-icon-check"></i>
												</view><uv-text size="13" :text="its.name"></uv-text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="tabbar[tabbarValue]&&tabbar[tabbarValue].children&&tabbar[tabbarValue].children[0]"
					:class="isPc?'regrsf regrsf_pc':'regrsf regrsf_os'"
					:style="(tabbarValue>=0?'width: '+(isPc?'45%':'calc(100% - 11px)')+';margin: 5px 5px;':'width:0%')+';opacity:' +(tabbarValue>=0?1:0)">
					<view v-if="tabbar[tabbarValue]&&tabbar[tabbarValue].children&&tabbar[tabbarValue].children[0]"
						class="assdfs" v-for="(ite,ind) in (tabbar[tabbarValue]&&tabbar[tabbarValue].children)"
						:key="ind">
						<view :class="ind==0?'assdfs_top':'assdfs_top topxx'">
							<view class="">{{ite.name}}</view>
							<view v-if="ind==0" style="cursor: pointer" @click="assdfsClick">
								<uv-icon size="24" name="close"></uv-icon>
							</view>
						</view>
						<view class="assort">
							<view class="assort_s cursor-pointer" v-for="(item,index) in ite.children" :key="index"
								:style="tabbarChecked==(index+ind*10)?'background-color:#eeeeee ;':''"
								@mouseenter="tabbarChecked = (index+ind*10)" @mouseleave="tabbarChecked = -1"
								@click="clickContent(item)">
								<view class="item_box">
									<uv-icon v-if="item.pic" :size="isPc?45:35" :label="item.name" labelPos="bottom"
										:name="'/static/level3/'+item.pic+'.svg'"></uv-icon>
									<uv-icon v-else :size="isPc?45:35" :label="item.name" labelPos="bottom"
										:name="tabbarsValue==item.en? item.actIcon:item.icon"></uv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<scroll-view :lower-threshold="clientHeight" ref="backTop" :scroll-top="scrollTop" scroll-y
					class="infinite-list" :style="isPc?'width: calc(100% - 11px);':''" @scrolltolower="loadMore"
					@scroll="handleScroll">
					<view class="index-top">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view
								:style="'display: flex;justify-content: flex-start;align-items: center;font-weight: bolder;font-size: 20px;border-radius: 5px;color: '+deepColor">
								<view @click="clickSS"
									style="width: 60px;display: flex;justify-content: center;align-items: center;border-radius: 10px;border: 1px solid #ddd;margin-right: 10px;">
									<uv-icon size="25" name="grid"></uv-icon>
								</view>
								推荐<i class="el-icon-d-arrow-right"></i>
							</view>
							<view style="display: flex;justify-content: flex-end;align-items: center;font-size: 14px;">
								<view
									:style="'margin-left: 10px;border-radius: 10px;padding: 2px 5px;border: 1px solid '+lightColor"
									@click="more = !more">
									所有人<i class="el-icon-arrow-right"></i>
								</view>
								<view
									:style="'margin-left: 10px;border-radius: 10px;padding: 2px 5px;border: 1px solid '+lightColor"
									@click="more = !more">
									筛选<i class="el-icon-arrow-right"></i>
								</view>
							</view>
						</view>
						<view v-if="tips &&tips[0]"
							style="margin-top: 5px;display: flex;justify-content: space-between;align-items: flex-start;">
							<view :class="tagMore?'tagMore':'onTagMore'">
								<!-- <view v-for="(item,index) in tips" :class="cindex==index?'CAD cindex':'CAD'"
									@mouseenter="cindex =index" @mouseleave="cindex = '-1'"
									@click="sindex =index;tag=item.name"
									:style="sindex==index?'background-color: #000;color:#fff;':'color: '+deepColor">
									{{item.name}}<uv-icon style="margin-left: 5px;" v-if="sindex==index" name="close-circle"
										@click="tag=null;sindex=null"></uv-icon>
								</view> -->
								<view style="margin-right: 10px;margin-bottom: 10px;width: auto;"
									v-for="(item,index) in tips" :key="index">
									<uv-tags type="error" :text="item.name" :plain="sindex!=index"
										@click="radioClick(index,item.name)" :closable="sindex==index"
										:closePlace="sindex==index?'right':''" :name="index"
										@close="tag=null;sindex=null"></uv-tags>
								</view>
							</view>
							<view
								style="cursor: pointer;display: flex;justify-content: flex-end;align-items: center;font-size: 14px;height: 29px;">
								<view :style="'padding: 0px 5px;color:'+deepColor" @click="tagMore = !tagMore">
									<i v-if="tagMore" style="font-size: 16px;" class="el-icon-d-arrow-right"></i>
									<i v-else style="font-size: 16px;" class="el-icon-d-arrow-left"></i>
								</view>
							</view>
						</view>
					</view>
					<waterfall ref="waterfall" style="width: 100%;padding-top:10px;height: auto;" :tag="tag"
						:search="searchs" :aside="aside">
					</waterfall>
					<view class="backtop">
						<uv-back-top :customStyle="customStyle" @click="clickTop" :scroll-top="scrollTop"></uv-back-top>
						<el-backtop :visibility-height="500"></el-backtop>
					</view>
				</scroll-view>
			</el-container>
		</view>
		<tabbars :prop-value="0"></tabbars>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import config from '@/common/config';
	import waterfall from '@/components/waterfall/waterfall.vue';
	import headers from '@/components/header/header.vue';
	import asides from '@/components/aside/aside.vue';
	import chuangfa from './grading/chuangfa.vue';
	import {
		like,
		getName,
		getCategoryName
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			tabbars,
			headers,
			asides,
			waterfall,
			chuangfa
		},
		data() {
			return {
				customStyle: {
					fontSize: '24rpx',
					color: '#2979ff',
					boxShadow: '0rpx 3rpx 6rpx rgba(0, 46, 37, 0.5)'
				},
				tabbar: config.tabbar,
				scrollTop: 0,
				deepColor: '#4D4D4D',
				shallowColor: '#808080',
				lightColor: '#ccc',
				cindex: -1,
				sindex: -1,
				searchs: '',
				aside: true,
				asideW: 60,

				tips: [],
				clientHeight: null,
				tag: '',
				tagMore: false,
				more: false,
				tabbarChecked: -1,
				tabbarsValue: '',
				assortShow: true,
				assort_name: null,
				assort: [{}],
				socialValue: '',
				socialList: [{
					name: '媒体类型',
					en: 'chuangfa',
					checked: false,
					children: [{
							name: 'AIGC',
							en: 'aigc',
							children: [{
									name: '对话',
									en: 'chat',
								},
								{
									name: '图画',
									en: 'painting',
								},
								{
									name: '视频',
									en: 'video',
								},
								{
									name: '音频',
									en: 'music',
								},
								{
									name: '压缩包',
									en: 'zip',
								},
								{
									name: '压缩包',
									en: 'zip',
								}
							],
						},
						{
							name: '文案',
							en: 'painting',
							children: [{
								name: '文案',
								en: 'copywriting',
							}, {
								name: '招投标',
								en: 'bidding',
							}],
						}, {
							name: '图画',
							en: 'painting',
							children: [{
								name: '文案',
								en: 'copywriting',
							}, {
								name: '招投标',
								en: 'bidding',
							}],
						}, {
							name: '影音',
							en: 'painting',
							children: [{
								name: '文案',
								en: 'copywriting',
							}, {
								name: '招投标',
								en: 'bidding',
							}],
						}, {
							name: '文件',
							en: 'painting',
							children: [{
								name: '文案',
								en: 'copywriting',
							}, {
								name: '招投标',
								en: 'bidding',
							}],
						}, {
							name: '互动',
							en: 'painting',
							children: [{
								name: '文案',
								en: 'copywriting',
							}, {
								name: '招投标',
								en: 'bidding',
							}],
						},
					],
				}, {
					name: '内容分类',
					en: 'painting',
					checked: false,
					children: [{
						name: '智界中',
						en: 'copywriting',
						children: [{
								name: '对话中',
								en: 'chat',
							},
							{
								name: '图画',
								en: 'painting',
							},
							{
								name: '视频',
								en: 'video',
							},
							{
								name: '音频',
								en: 'music',
							}
						],
					}, {
						name: '生活',
						en: 'bidding',
					}, {
						name: '艺创',
						en: 'bidding',
					}, {
						name: '商道',
						en: 'bidding',
					}, {
						name: '万象',
						en: 'bidding',
					}],
				}],
				social: null,
				socialIndex: [],
				selected: [],
				opShow: false,
				multiple: false

			}
		},
		watch: {
			// tabbarValue(newVal, oldVal) {
			// 	if(this.isPc) this.aside = !this.aside;
			// },
			aside(newVal, oldVal) {
				console.log(newVal);
			},
		},
		mounted() {
			this.$uv.vuex('tabbarValue', 0);
			if (!this.isPc) { // 针对桌面平台（Windows和Mac）
				this.aside = false;
				this.asideW = 0;
			}
			const res = uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - uni.upx2px(80);
				}
			});
			getName('hottags', {
				custom: {
					auth: true,
					toast: false
				},
				params: {
					date: uni.$uv.date(new Date().getTime(), 'yyyy-mm-dd')
				}
			}).then(e => {
				if (e) {
					this.tips = e;
				}
			}).catch(e => {});
			this.getCategory();
		},
		methods: {
			clickSS() {
				this.opShow = !this.opShow;
				this.aside = !this.aside;
				// this.$refs.waterfall.adjustColumnCount();
			},
			clickSave() {
				uni.$uv.debounce(this.getCategory(), 500)
				if (!this.isPc) this.opShow = !this.opShow;
				// console.log('clickSave');
			},
			getCategory() {
				getCategoryName('tree', {
					custom: {
						auth: true,
						toast: false
					},
					params: {
						keyword: this.socialValue
					}
				}).then(e => {
					if (e) {
						this.socialList = e;
					}
				}).catch(e => {});
			},
			getAllCheckedItems(items) {
				let result = [];

				items.forEach(item => {
					if (item.checked === true) {
						const newItem = {};
						for (const key in item) {
							if (key !== 'children') {
								newItem[key] = item[key];
							}
						}
						result.push(newItem);
					}

					// 递归检查 children
					if (item.children && item.children.length > 0) {
						result = result.concat(this.getAllCheckedItems(item.children));
					}
				});

				return result;
			},
			sociaClick(a, i = null, e = null) {
				console.log('sociaClick', a, i, e);
				if (e != null) {
					var arr = this.socialList[a].children[i].children;
					if (arr[e].checked == true) {
						this.$set(this.socialList[a].children[i].children[e], "checked", false);
						return;
					}
					for (var index = 0; index < arr.length; index++) {
						var element = arr[index];
						this.$set(element, "checked", false);
					}

					this.$set(arr[e], "checked", true);
					return;
				}
				if (this.socialList[a].checked == true && this.socialList[a]?.children[i].checked == true) {
					this.$set(this.socialList[a], "checked", false);
					if (i != null) this.$set(this.socialList[a]?.children[i], "checked", false);
					if (e != null) this.$set(this.socialList[a]?.children[i].children[e], "checked", false);
					return;
				}

				this.$set(this.socialList[a], "checked", true);

				if (i != null) {
					var arr = this.socialList[a].children;
					for (var index = 0; index < arr.length; index++) {
						var element = arr[index];
						this.$set(element, "checked", false);
						if (element.children) {
							for (var ind = 0; ind < element.children.length; ind++) {
								var elem = element.children[ind];
								this.$set(elem, "checked", false);
							}
						}
					}
					this.$set(arr[i], "checked", true);
				}
			},
			multipled(a, i = null, e = null) {
				console.log('multipled', a, i, e);
				if (e != null) {
					var arr = this.socialList[a].children[i].children;
					if (arr[e].checked == true) {
						this.$set(arr[e], "checked", false);
						return;
					}
					this.$set(arr[e], "checked", true);
					return;
				}
				if (this.socialList[a].checked == true && this.socialList[a]?.children[i].checked == true) {
					// this.$set(this.socialList[a], "checked", false);
					if (i != null) this.$set(this.socialList[a]?.children[i], "checked", false);
					if (e != null) this.$set(this.socialList[a]?.children[i].children[e], "checked", false);
					return;
				}

				this.$set(this.socialList[a], "checked", true);

				if (i != null) {
					var arr = this.socialList[a].children;
					this.$set(arr[i], "checked", true);
				}
			},
			async delx(i = '') {
				let newArray = this.selected.slice();
				let index = this.selected.findIndex(item => item == i);
				if (index >= 0) this.selected.splice(index, 1);
			},
			assdfsClick() {
				this.$uv.vuex('tabbarValue', -1);
			},
			radioClick(index, name) {
				// this.tips.map((item, index) => {
				// 	item.checked = index === name ? true : false
				// })
				this.sindex = index;
				this.tag = name;
			},
			loadMore(e) {
				this.$refs.waterfall.loadMore();
			},
			handleScroll(e) {
				this.scrollTop = e?.detail.scrollTop
				const that = this; // 保存组件实例的引用
				// uni.$uv.debounce(() => that.scrollTop = e?.detail.scrollTop, console.log(e), 300);
			},
			clickTop() {
				var that = this;
				let timess = setInterval(function() {
					let num = parseInt(that.scrollTop / 50);
					if (num < 1) num = 1;
					that.scrollTop = that.scrollTop - num;
					if (that.scrollTop < 1) clearInterval(timess);
					// console.log(that.scrollTop);
				}, 1);
			},
			customevent(e) {
				this.aside = e;
				if (e) {
					this.asideW = 60;
				} else {
					this.asideW = 0;
				}
			},
			clickContent(e) {
				if (e.url) this.routed(e.url);
			},
			routed(url = '') {
				if (!url) return;
				uni.$uv.route({
					url: url
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	@import 'element-ui/lib/theme-chalk/display.css';

	body {
		overflow: hidden;
		/* 允许垂直滚动 */
		-webkit-overflow-scrolling: touch;
		/* 使用原生滚动，提高性能 */
		position: fixed;
		/* 固定body位置，防止反弹效果 */
		width: 100%;

		/* 确保宽度覆盖全屏 */
		.index-index {
			height: 100%;
			overflow-x: hidden;

			.socialMedia {
				border: 1px solid #ccc;
				border-radius: 10px;
				font-size: 14px;

				.socialTop {
					width: auto;
					padding: 5px 10px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.socialInput {
						width: 120px;
						height: 20px;
						padding: 4px 6px !important;
					}

					.socialBtn {
						padding: 6px 10px !important;
						margin-left: 5px;
					}

				}

				.socialTitle {
					width: auto;
					display: inline-block;
					white-space: pre-wrap;
					word-wrap: break-word;
					height: auto;
					color: #808080;
					font-size: 13px;
				}

				.socialItem {
					width: auto;
					display: flex;
					justify-content: flex-start;
					border-top: 1px solid #ccc;
					padding: 10px 10px;
					color: #666;

					.socialop {
						display: flex;
						justify-content: flex-start;
						margin-bottom: 5px;

						.sociatt {
							margin-left: 10px;
							border-bottom: 2px solid #ffffff;
							display: flex;
							cursor: pointer;

							.muicon {
								margin-right: 5px;
								border-radius: 3px;
								border: 1px solid #333333
							}

							.sed {
								color: #000;
							}

							.nod {
								color: #fff;
							}
						}

						.checked {
							font-weight: bold;
							color: #333;
							padding: 0px 0px 2px 0px;
							border-bottom: 2px solid #333;
						}
					}

					.socialCont {
						border-radius: 10px;
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						align-items: center;

						.soctt {
							margin-left: 10px;
							border-bottom: 2px solid #fafafa;
							display: flex;
							cursor: pointer;
							margin-left: 10px;
							margin: 5px 10px;

							.muicon {
								margin-right: 5px;
								border-radius: 3px;
								border: 1px solid #333333
							}

							.sed {
								color: #000;
							}

							.nod {
								color: #fff;
							}
						}

						.checked {
							font-weight: bold;
							color: #666;
							padding: 0px 0px 2px 0px;
							border-bottom: 2px solid #666;
						}
					}
				}
			}

			.social_pc {
				width: 55%;
				margin: 5px;
			}

			.social_os {
				width: calc(100% - 12px);
				height: calc(100vh - 120px);
				position: absolute;
				z-index: 2;
				margin: 5px;
				background-color: #ffffff;
			}

			.regrsf {
				border: 1px solid #ccc;
				border-radius: 10px;
				background-color: #fafafa;
				overflow: hidden;
				transition: width 2s;

				.ai_time {
					width: auto;
					padding-bottom: 5px;
					border-right: 1px solid #ccc;

					.ai_time_s {
						border-radius: 5px;
						padding: 3px 0px;
						margin-top: 5px;
						flex-wrap: nowrap;
						cursor: pointer;

						.item_box {
							display: flex;
							justify-content: center;
							align-items: center;
							margin: 5px 10px;
						}
					}
				}

				.assdfs {
					// border: 1px solid #ccc;
					// border-radius: 10px;
					// background-color: #fafafa;
					// margin: 10px 10px 0px;

					.assdfs_top {
						padding: 5px 10px;
						border-bottom: 1px solid #ccc;
						display: flex;
						justify-content: space-between;
						background-color: #ffffff;
					}

					.topxx {
						border-top: 1px solid #ccc;
					}

					.assort {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						max-width: 100%;
						padding: 0px 5px 5px;

						.assort_s {
							width: 50px;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 5px;
							padding: 3px 10px;
							margin-top: 5px;

							.item_box {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin: 5px 10px;
								// height: 100%;
							}
						}
					}

				}
			}

			.regrsf_os {
				width: calc(100% - 12px);
				height: calc(100vh - 120px);
				position: absolute;
				z-index: 2;
			}

			.regrsf_pc {
				width: 50%;
			}

			.infinite-list {
				overflow: auto;
				padding: 5px;
				height: calc(100vh - 60px);

				.index-top {

					.CAD {
						min-width: 60px;
						display: flex;
						justify-content: center;
						font-size: 14px;
						margin: 0px 0px 10px 10px;
						padding: 4px 10px;
						border-radius: 5px;
					}

					.cindex {
						background-color: #cccccc;
					}

					.square {
						// background-color: #09bb07;
						height: 0;
						/* 设置高度为0，使其高度由宽度计算得出 */
						padding-bottom: 23%;
						/* 设置padding-bottom为100%，使得高度等于宽度 */
						position: relative;
						/* 为了内部元素的定位 */
					}

					.tagMore {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;
						overflow: hidden;
						height: auto;
					}

					.onTagMore {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;
						overflow: hidden;
						height: 30px;
					}

					// 轮播图
					@mixin flex($direction: row) {
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: $direction;
					}

					.indicator {
						@include flex(row);
						justify-content: center;

						&__dot {
							cursor: pointer;
							height: 6px;
							width: 6px;
							border-radius: 100px;
							background-color: rgba(255, 255, 255, 0.35);
							margin: 0px 5px;
							margin-top: -2px;
							padding: 2px 10px;
							transition: background-color 0.3s;

							&--active {
								background-color: #ffffff;

							}
						}
					}

					::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
						width: 14px;
						height: 14px;
						background: #bfbfbf;
						border: 2px solid #ffffff;
						border-radius: 50%;
						opacity: 0.5;
					}

					::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button {
						width: 14px;
						height: 14px;
						background: #ffffff;
						border-radius: 50%;
						opacity: 1;
					}

					::v-deep .el-carousel__indicators {
						// 指示灯位置
						left: unset;
						transform: unset;
						right: 2%;
					}
				}
			}

		}


		// 瀑布
		.waterfall_flow {
			padding: 0px;
			display: flex;
			justify-content: space-between;
			align-items: self-start;
			flex-wrap: wrap;

			.cont-box {
				$borderRadius: 25rpx;
				float: left;
				width: 100%;

				.list-box {
					width: 100%;
					margin-bottom: 1vh;
					padding: 0px;
					border-radius: $borderRadius;
					overflow: hidden;
				}
			}
		}

		.backtop {
			cursor: pointer;
		}
	}
</style>